/**
 *  useEffect 
 * ## 一、什么是副作用？
 *  副作用是相对于主作用来说的，一个函数除了主作用，其他的就是副作用，对于React组件来说，主作用就是根据数据（state/props）渲染UI,除此之外，都是副作用（比如，手动修改DOM）
 * 
 * ### 常见的副作用
 *      1. 数据请求 ajax 发送
 *      2. 手动修改dom
 *      3. localstorage 操作
 * ### 依赖项控制执行时机
 *    1. 不添加依赖项 
 *      组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行
 *          ① 组件初始渲染
 *          ② 组件更新（不管是哪个状态引起的更新）
 *          useEffect(()=>{
 *              console.log('副作用执行了')
 *          })
 *    2. 添加空数组
 *       组件只在首次渲染时执行一次
 *              useEffect(()=>{
 *                  console.log('副作用执行了')
 *              },[])
 *    3. 添加特定依赖项
 *      副作用函数在首次渲染时执行，在依赖项发生变化时重新执行
 *       function App(){
 *          const [count,setCount] = useState(0)
 *          const [name,setName] = useState('zs') 
 *          useEffect(()=>{
 *              console.log('副作用执行了')
 *          },[count])
 *          
 *          return (
 *              <>
 *                  <button onClick={()=>{setCount(count + 1)}}>{count}</button>
 *                  <button onClick={()=>{setName('cp')}}>{name}</button>
 *              </>
 *          )
 *       }
 *      注意：useEffect 回调函数中用到的数据（比如，count）就是依赖项数据，就应该出现在依赖项数组中，如果不添加就会有bug出现。
 */

import { func } from "prop-types";
import { useEffect,useState } from "react";
function Test3(){
    const [count,setCount] = useState(0)
    useEffect(()=>{
        // dom操作
        document.title = `当前已点击了${count}次` 
    })
    return (
        <button onClick={()=>{setCount(count + 1)}}>{count}</button>
    )
}
export default Test3